<!-- 这是商品详情组件 -->
<template>
  <div class='goodsDetail'>
    <van-nav-bar title="详情"
                 left-text="返回"
                 left-arrow
                 :fixed=true
                 @click-left="handleBack" />
    <div class="banner">
      <van-swipe :autoplay="3000"
                 indicator-color="white">
        <van-swipe-item v-for="(image, index) in swipeImgs"
                        :key="index"
                        @click="handleImgPreview(index)">
          <img :src="image"
               alt=""
               width="100%"
               height="100%">
        </van-swipe-item>
      </van-swipe>
    </div>
    <img width="100%"
         height="100%"
         src="//t13img.yangkeduo.com/cart/2019-09-11/f0339614d5ad79f1c47d0df899f3f398.png">
    <div class="price-group">
      <span>￥</span>
      <span class="current-price">{{price}}</span>
      <!-- <del class="original-price">￥29.5</del> -->
      <span class="paying">3.9万已人付款</span>
    </div>
    <p class="goodsTitle">【正品玫瑰花苗老桩】室内阳台花卉盆栽四季开花不断包开花包对版</p>
    <van-divider />
    <div class="promise">
      <van-icon name="logistics" />
      <span> 极速退款· </span>
      <van-icon name="free-postage" />
      <span> 全场包邮· </span>
      <van-icon name="cash-back-record" />
      <span> 7天退换· </span>
      <van-icon name="certificate" />
      <span> 24小时发货</span>
    </div>
    <div class="goods-description">
      <van-divider>商品规格</van-divider>
      <p class="specification">类型</p>
      <ul class="ul-flex">
        <li class="active">小苗</li>
        <li>小苗+盒子</li>
        <li>成品苗</li>
        <li>成品苗+盒子</li>
      </ul>
      <p class="specification">颜色</p>
      <ul class="ul-flex">
        <li>红色</li>
        <li>蓝色</li>
        <li class="active">紫色</li>
        <li>彩色</li>
        <li>彩色</li>
        <li>彩色</li>
        <li>彩色</li>
        <li>彩色</li>
        <li>彩色</li>
      </ul>
      <p class="specification">购买数量</p>
      <van-stepper v-model="amount"
                   input-width="40px"
                   button-size="32px" />

      <van-divider>商品详情</van-divider>
      <p class="goods-content">{{goodsContent}}</p>
      <van-divider>图片展示</van-divider>
      <div class="picture-details">
        <img width="100%"
             height="100%"
             src="//t00img.yangkeduo.com/goods/images/2018-11-20/d33c7dd1739f7c1eefb777266e3394c4.jpeg?imageMogr2/quality/70"
             alt="">
        <img width="100%"
             height="100%"
             src="//t00img.yangkeduo.com/goods/images/2018-11-20/1a56c8b45c31615a59b5ca2db61fff2d.jpeg?imageMogr2/quality/70"
             alt="">
        <img width="100%"
             height="100%"
             src="//t00img.yangkeduo.com/goods/images/2018-11-20/0a4cf50c2efbdfccf8b94255e3eb7591.jpeg?imageMogr2/quality/70"
             alt="">
        <img width="100%"
             height="100%"
             src="//t00img.yangkeduo.com/goods/images/2018-11-20/651175ca996d8acf053cbafdaac99254.jpeg?imageMogr2/quality/70"
             alt="">
      </div>
    </div>
    <van-goods-action>
      <van-goods-action-icon :icon="collectionIcon"
                             :text="collectionText"
                             @click="handleCollection" />
      <van-goods-action-icon icon="cart-o"
                             text="购物车"
                             :info="goodsQuantity"
                             @click="handleShoppingCart" />
      <van-goods-action-button type="warning"
                               text="加入购物车"
                               @click="handleAdd" />
      <van-goods-action-button type="danger"
                               text="立即购买"
                               @click="handleBuy" />
    </van-goods-action>
  </div>
</template>

<script>
import { ImagePreview } from 'vant';
export default {
  name: 'goodsDetail',
  data () {
    return {
      id: '',
      isCollection: false,
      price: 24.99,
      collectionIcon: 'like-o',
      collectionText: '收藏',
      goodsQuantity: '99',/* 该值需要到store仓库中获取如果大于99显示99+即可 */
      swipeImgs: ['//t00img.yangkeduo.com/goods/images/2019-09-01/e0aa455ef4a9c10414244e14988e464f.jpeg?imageMogr2/strip%7CimageView2/2/w/1300/q/80',
        '//t00img.yangkeduo.com/goods/images/2019-08-31/2cc0416e-3a06-4cca-9f37-2ee6f30396c2.jpeg?imageMogr2/strip%7CimageView2/2/w/1300/q/80',
        '//t00img.yangkeduo.com/goods/images/2019-08-31/941b3933-a525-40e4-b823-7a2bf33acb49.jpeg?imageMogr2/strip%7CimageView2/2/w/1300/q/80',
        '//t00img.yangkeduo.com/goods/images/2019-08-31/0eba44bc-395f-4c72-8c2a-db297c0a7f5f.jpeg?imageMogr2/strip%7CimageView2/2/w/1300/q/80',
        '//t00img.yangkeduo.com/goods/images/2019-08-31/6b114617-1c18-401e-a48d-973b686018d1.jpeg?imageMogr2/strip%7CimageView2/2/w/1300/q/80'],
      goodsContent: '本店花苗包活,包对版!花苗有什么问题及时联系我们正品玫瑰老桩,蓝色妖姬七彩玫瑰等卡罗拉一系列切花玫瑰花苗,包成活,包售后。,欢迎新老客户前来购买。友情提醒;【花苗收到货请联系客服教种植方法!花苗前期遮阳庇荫、每天浇水二次,每一次都浇透!发芽以后坚决不要给风吹会导致发出来的小芽干枯或者枯萎,等叶子长大了可以正常的晒太阳和少量的浇水】如干死亡的花苗或者发芽以后给风吹枯萎或者干枯的花苗我们一律不包赔偿哦!【花苗开口如碗口大、一棵花苗开十几朵!花香飘荡一百米左右】【超耐冻植物零下三十五度还是正常生长和开花的最适合比较寒冷,和非常寒冷的地区种植,现在种2个月开花!',
      amount: 1
    };
  },
  components: {

  },
  computed: {

  },
  created () {
    // this.id = this.$route.params.id;
    console.log(this.$route.params.id);
    /* 获取商品明细ID，进行请求渲染数据 */

    /* 1.获取该商品是否已收藏 */
  },
  methods: {
    /* 返回上一页 */
    handleBack () {
      this.$router.go(-1);
    },
    handleImgPreview (index) {
      ImagePreview({
        images: this.swipeImgs,
        startPosition: index,
        onClose () {
          // do something
        }
      });
    },
    handleCollection () {
      if (this.isCollection) {
        this.$toast('取消收藏');
        this.collectionText = '收藏';
        this.collectionIcon = 'like-o';
        this.isCollection = !this.isCollection;
      } else {
        this.$toast('已加入收藏，可在您的个人中心查看');
        this.collectionText = '已收藏';
        this.collectionIcon = 'like';
        this.isCollection = !this.isCollection;
      }
    },

    /* 跳转到购物车页面 */
    handleShoppingCart () {
      this.$router.push({
        name: 'cart'
      })
    },
    /* 加入购物车 */
    handleAdd () {
      /* 注意此时需要修改购物车上标记的数量 
        也就是在购物车中添加一条数据，并统计数量
        此时就用到vuex
        1.商品的id
        2.商品的数量
        3.商品的规格（有才传递）
      */
      this.$toast.success('成功添加');
    },
    handleBuy () {
      this.$toast('立即购买');
    }
  },
  mounted () {
    // console.log(this.$route);
  }
}
</script>

<style lang='css' scoped>
.goodsDetail {
  padding: 90px 0 120px;
}
.banner {
  height: 652px;
  overflow: hidden;
}
.back {
  position: fixed;
  z-index: 1;
  top: 20px;
  left: 20px;
  width: 80px;
  height: 80px;
  background-color: rgba(0, 0, 0, 0.6);
  line-height: 80px;
  border-radius: 50%;
  text-align: center;
  color: #ddd;
  font-size: 60px;
}

.price-group {
  position: relative;
  padding: 10px 20px;
  font-size: 30px;
  color: #e02e24;
}
.current-price {
  font-weight: bold;
  font-size: 50px;
}
.original-price {
  color: #58595b;
  font-size: 26px;
}
.paying {
  position: absolute;
  top: 50%;
  right: 20px;
  color: #58595b;
  font-size: 26px;
  transform: translateY(-50%);
}
.goodsTitle {
  padding: 0 20px;
  font-size: 30px;
  font-weight: bold;
}
.promise {
  /* height: 30px; */
  /* line-height: 30px; */
  padding-left: 20px;
  text-align: center;
  font-size: 26px;
  color: #58595b;
}
.promise .van-icon {
  font-size: 26px;
  /* 基线对其方式：底部对其 */
  vertical-align: text-bottom;
}

/* 商品详情 */
.goods-description {
  padding: 0 20px;
  color: #151516;
  font-size: 30px;
}
.goods-description .goods-content {
  color: #666;
  word-wrap: break-word;
  text-align: justify;
  text-indent: 60px;
  line-height: 50px;
}
.goods-description .specification {
  margin-bottom: 8px;
  font-size: 30px;
  color: #c8c9cc;
}
.ul-flex {
  display: flex;
  flex-wrap: wrap;
}
.ul-flex li {
  margin: 0 20px 20px 0;
  padding: 18px 34px;
  color: #333;
  background-color: #f2f3f5;
  border-radius: 10px;
}
.ul-flex li.active {
  color: #fff;
  background-color: #ee0a24;
}
</style>